<template>
  <div class="tabbar">
    <div
      class="tabbar-item"
      v-for="(item,index) in tabOptions"
      :key="index"
      @click="jumpRouter(index, item.path)"
    >
        <img class="icon" :src='item.icon' v-if='item.icon'>
        <div class="name">{{item.tabname}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tabOptions: {
      default: () => [
        {tabname: '首页', icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547212540949&di=90e419f2c3ab65cdb2b6fccabbd0424c&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F48%2F24573cc143dc5af.jpg',path: '/'},
        {tabname: '发现', icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547212593661&di=37bc22cb0c5c970b32a24b020aa3ebc5&imgtype=0&src=http%3A%2F%2Fwww.51yuansu.com%2Fpic2%2Fcover%2F00%2F31%2F97%2F5810d5c5a8c92_610.jpg', path: '/discover'},
        {tabname: '关注', icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547212593661&di=37bc22cb0c5c970b32a24b020aa3ebc5&imgtype=0&src=http%3A%2F%2Fwww.51yuansu.com%2Fpic2%2Fcover%2F00%2F31%2F97%2F5810d5c5a8c92_610.jpg', path: '/focus'},
        {tabname: '用户', icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547212622281&di=311eb6cd101534a1b7e06e28872182e8&imgtype=0&src=http%3A%2F%2Fcdn1.freepik.com%2Fimage%2Fth%2F318-29540.jpg', path: '/me'}
      ],
      type: Array
    }
  },
  methods: {
    jumpRouter(index, path) {
      // 父组件触发子组件事件
      this.$router.push({path: path})
    },
    // jumpRouter(index) {
    // 子组件向父组件传递数据
    // this.$emit('jumpRouter', index)
    // }
  }
}
</script>
<style lang="scss" scoped>
.tabbar{
  z-index: 20;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #ccc;
  .tabbar-item{
    text-align: center;
    padding: 1% 0;
    box-sizing: border-box;
    flex: 1;
    .icon{
      width: 20px;
      height: 20px;
      margin: 0 auto;
      margin-bottom: 5%;
      border-radius: 50%;
      display: block;
    }
    .name{
      font-size: 12px;
    }
  }
}
</style>

